<template>
	<view class="publishList">
		<view class="getH">
			<dwu-navbar title="我的发单"></dwu-navbar>
		</view>
		<u-sticky v-if="show" bgColor="#F7F9F9" :offset-top="offsetTop">
			<u-tabs :list="tabList" lineColor="#B0DD67" :current="current" @click="chooseTab"></u-tabs>
		</u-sticky>
		<view class="order-list" v-if="orderList.length > 0">
			<view class="order-item" v-for="(item,index) in orderList" :key="index"
				@click="onJump('/subpackage/order/detail?id='+item.id)">
				<image v-if="item.is_status == 2" class="order-item-bg" src="@/static/index/order_item_bg2.png" mode="">
				</image>
				<image v-else class="order-item-bg" src="@/static/index/order_item_bg1.png" mode=""></image>
				<view class="order-title">
					<view class="order-left">
						<text>{{item.repair_name}}</text>
						<dwu-state :title="item.service_name"></dwu-state>
					</view>
					<text class="order-type" v-if="item.is_status == 0">待接单</text>
					<text class="order-type" v-else-if="item.is_status == 1">待上门</text>
					<text class="order-type" v-else-if="item.is_status == 2">服务中</text>
					<text class="order-type" v-else-if="item.is_status == 3">待评价</text>
					<text class="order-type" v-else-if="item.is_status == 4">已完结</text>
					<text class="order-type" v-else-if="item.is_status == 5">取消订单</text>
					<text class="order-type" v-else>-</text>
				</view>
				<view class="content">
					<view class="content-item">
						<text class="label">订单编号</text>
						<text class="value">{{item.order_sn}}</text>
					</view>
					<view class="content-item">
						<text class="label">期望上门时间</text>
						<text class="value">{{item.call_time}}</text>
					</view>
				</view>
			</view>
		</view>
		<dwu-empty paddingTop="240rpx" image="/static/public/empty_icon1.png" imageW="234rpx" imageH="166rpx" tips="您当前还没有发单哦~" v-else></dwu-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				offsetTop: 0,
				show: false,
				current: 0,
				tabList: [{
					name: '全部订单',
					value: '-1'
				}, {
					name: '待接单',
					value: 0
				}, {
					name: '待上门',
					value: 1
				}, {
					name: '服务中',
					value: 2
				}, {
					name: '已完成',
					value: 4
				}, {
					name: '待评价',
					value: 3
				}],
				page: 1,
				pageSize: 10,
				flag: false,
				orderList: [],
				status: ''
			};
		},
		onShow() {
			this.page = 1
			this.flag = false
			this.getHeight()
			this.userIndex()
			this.show = true
		},
		onLoad(options) {
			let type = options.type
			for (var i = 0; i < this.tabList.length; i++) {
				if (type == this.tabList[i].value) {
					this.current = i
					this.status = type
				}
			}
		},
		onReachBottom() {
			if (this.flag) return
			this.page++
			this.flag = true
			this.userIndex(true)
		},
		methods: {
			getHeight() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.getH').boundingClientRect(data => {
					if (data) {
						this.offsetTop = data.height
						this.$forceUpdate()
					}
				}).exec();
			},
			userIndex(next) {
				this.request.http('/order/userIndex', 'post', {
					page: this.page,
					limit: this.pageSize,
					is_status: this.status
				}).then(res => {
					let data = res.data
					if (data.code == 1) {
						if (next) {
							if (data.data.data.length > 0) {
								this.orderList = this.orderList.concat(data.data.data)
								this.flag = false
							}
						} else {
							this.orderList = data.data.data
							this.flag = false
						}
					}
				})
			},
			chooseTab(e) {
				this.status = e.value
				this.userIndex()
				console.log(e);
			},
			onJump(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #F7F9F9;
	}

	.publishList {
		.order-list {
			.order-item {
				position: relative;
				// margin-bottom: 20rpx;
				padding: 44rpx;
				// background-color: #fff;
				border-radius: 18rpx;

				.order-item-bg {
					position: absolute;
					z-index: 1;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
				}

				.order-title {
					position: relative;
					z-index: 10;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.order-left {
						display: flex;
						align-items: center;
						&>text {
							margin-right: 18rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 600;
							font-size: 27rpx;
							color: #474747;
						}
					}

					.order-type {
						margin-left: 25rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 23rpx;
						color: #949494;
					}
				}

				.content {
					position: relative;
					z-index: 10;
					margin-top: 28rpx;

					.content-item {
						margin-bottom: 18rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.label {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 23rpx;
							color: #666666;
						}

						.value {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 23rpx;
							color: #868686;
						}
					}
				}
			}
		}
	}
</style>